<template>
  <el-dialog
    :visible.sync="kindShow"
    :before-close="handleClose"
    :append-to-body="false"
    :show-close="false"
    class="create-order-kind-dialog small-common-dialog-size"
    @close="closeDialog">
    <Title :title="!kindId?'添加订单分类':'编辑订单分类'" font-size="16px" style="margin-bottom:20px;"/>
    <el-form
      ref="configKindForm"
      :rules="rules"
      :model="queryData"
      label-position="left"
      label-width="80px"
      class="setting-form">
      <el-form-item label="订单分类" prop="orderKindName" style="margin-bottom: 24px;">
        <el-input
          v-model.trim="queryData.orderKindName"
          style="font-size: 13px;width:240px;"
          type="text"
          size="small"
          maxlength="20"
          placeholder="最多20个字符"
        />
      </el-form-item>
    </el-form>
    <div class="btn-container">
      <el-button :loading="loading" type="primary" size="small" @click="handleOk">确定</el-button>
      <el-button class="cancel-btn-style" size="small" style="width: 80px" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import { orderKindEdit, orderKindAdd } from '@/api/config';

export default {
  components: { Title },
  data() {
    return {
      kindShow: false,
      kindId: null,
      info: '',
      queryData: {
        orderKindName: ''
      },
      rules: {
        orderKindName: [{ required: true, trigger: 'blur', message: '请输入订单分类' }]
      },
      loading: false
    };
  },
  methods: {
    initInfo(data) {
      if (data) {
        this.queryData.orderKindName = data.name;
        this.kindId = data.id;
      }
    },
    handleClose() {
      this.kindShow = false;
    },
    closeDialog() {
      this.queryData = {
        orderKindName: ''
      };
      this.kindId = null;
      this.$refs.configKindForm.resetFields();
    },
    handleOk() {
      this.$refs.configKindForm.validate(vaild => {
        if (vaild) {
          if (this.kindId) {
            this.toEdit();
          } else {
            this.toAdd();
          }
        } else {
          return false;
        }
      });
    },
    toAdd() {
      this.loading = true;
      orderKindAdd(this.queryData).then(res => {
        if (res.code === 501) {
          this.$message.warning(res.message);
          this.loading = false;
          return false;
        } else {
          this.loading = false;
          this.$emit('update');
        }
        this.loading = false;
        this.$message.success('添加成功');
        this.kindShow = false;
      }).catch(err => {
        this.loading = false;
        this.kindShow = false;
        console.error(err);
      });
    },
    toEdit() {
      this.loading = true;
      orderKindEdit(this.kindId, this.queryData).then(res => {
        if (res.code === 501) {
          this.$message.warning(res.message);
          this.loading = false;
          return false;
        } else {
          this.$emit('update');
        }
        this.loading = false;
        this.$message.success('修改成功');
        this.kindShow = false;
      }).catch(err => {
        this.loading = false;
        this.kindShow = false;
        console.error(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-container {
  display: flex;
  justify-content: center;
}
</style>
